<template>
  <div class="employee-info content-box-full">
    <ContainerBox>
      <template #header>
        <el-form ref="formRef" :model="searchForm" label-width="auto" inline class="demo-ruleForm">
          <el-form-item label="员工号：" prop="workNo">
            <el-input
              placeholder="请输入员工号  空格分隔可以查询多条数据"
              style="width: 700px"
              v-model="searchForm.workNo"
              type="text"
              autocomplete="off"
            />
          </el-form-item>
          <el-form-item label="在职状态：" prop="dutyStatus">
            <el-select class="inline-select" v-model="searchForm.dutyStatus">
              <el-option
                v-for="item in DUTY_STATUS_LIST"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              :disabled="isLoadingTable"
              v-prevent-reclick
              type="primary"
              @click="handleSearch"
              >查询
            </el-button>
            <el-button :disabled="isLoadingTable" v-prevent-reclick @click="handleExport"
              >导出
            </el-button>
          </el-form-item>
        </el-form>
      </template>
      <template #default>
        <el-table
          :data="tableData"
          :empty-text="isLoadingTable ? '加载中...' : '暂无数据'"
          class="table-box"
          height="100%"
          stripe
          fit
          border
          highlight-current-row
        >
          <el-table-column
            fixed
            align="center"
            type="index"
            width="60"
            label="序号"
          ></el-table-column>
          <el-table-column
            v-for="item in tableHeaderList"
            :key="item.prop"
            :prop="item.prop"
            :label="item.label"
            :align="item.align"
            :fixed="item.fixed"
            :min-width="item.width"
          >
            <template v-if="item.prop === 'leaveDate'" #default="{ row }">
              <span v-if="row['leaveDate'] !== '0'">{{ row['leaveDate'] }}</span>
              <span v-else></span>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <template #footer>
        <CommonPaging
          :total="tableTotal"
          :currentPage="pageNum"
          @currentChange="handleCurrentChange"
          @sizeChange="handleSizeChange"
        ></CommonPaging>
      </template>
    </ContainerBox>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import ContainerBox from '@/components/base/ContainerBox.vue'
import { DUTY_STATUS_LIST } from '@/utils/systemConfig.js'
import CommonPaging from '@/components/base/CommonPaging.vue'
import employeeApi from '@/api/employeeApi.js'
import message from '@/utils/elMessage.js'

onMounted(() => {
  fetchEmployeeList()
})
const searchForm = ref({
  workNo: '',
  dutyStatus: '',
})
const pageNum = ref(1)
const pageSize = ref(10)

function handleSearch() {
  handleCurrentChange(1)
}

function fetchEmployeeList() {
  isLoadingTable.value = true
  tableData.value = []
  const params = {
    page: pageNum.value,
    limit: pageSize.value,
    userId: searchForm.value.workNo,
    state: searchForm.value.dutyStatus,
  }
  employeeApi
    .getEmployeeList(params)
    .then((res) => {
      if (res.code === 0) {
        const data = res.page || {}
        tableTotal.value = data.totalCount || 0
        tableData.value = data.list || []
      } else {
        message.warning(res.msg)
      }
    })
    .finally(() => {
      isLoadingTable.value = false
    })
}

function handleExport() {}

const isLoadingTable = ref(false)
const tableData = ref([])
const tableTotal = ref(0)
//表格内容
const tableHeaderList = ref([
  { prop: 'name', label: '姓名', align: 'center', width: 100, fixed: true },
  { prop: 'userId', label: '工号', align: 'center', width: 100, fixed: true },
  { prop: 'efferDate', label: '入职日期', align: 'center', width: 120 },
  { prop: 'leaveDate', label: '离职日期', align: 'center', width: 120 },
  { prop: 'phone', label: '电话', align: 'center', width: 120 },
  // {prop: 'factory', label: '档案分组编码', align: 'center', width: 120},
  { prop: 'payGroup', label: '薪资范围名称', align: 'center', width: 120 },
  { prop: 'employeeNatrue', label: '用工性质名称', align: 'center', width: 120 },
  { prop: 'country', label: '国家', align: 'center', width: 80 },
  { prop: 'employeeClass', label: '员工组', align: 'center', width: 100 },
  { prop: 'costCenterCode', label: '成本中心编码', align: 'center', width: 120 },
  { prop: 'costCenterLabel', label: '成本中心名称', align: 'center', width: 150 },
  { prop: 'organizationCode', label: '部门编码', align: 'center', width: 100 },
  { prop: 'organizationLabel', label: '部门名称', align: 'center', width: 120 },
])

function handleCurrentChange(val) {
  pageNum.value = val
  fetchEmployeeList()
}

function handleSizeChange(val) {
  pageNum.value = 1
  pageSize.value = val
  fetchEmployeeList()
}
</script>

<style scoped lang="scss">
.employee-info {
}
</style>
